<template>
	<view class="dataList">
		<view class="dataList_title flexjsbac">
			<text>修改预约时间</text>
		</view>
		<scroll-view scroll-x style="width: 100%;background-color: #fff;">
			<view class="tabs-box">
				<view
					v-for="(item, index) in tabList"
					:key="index"
					:class="['tabs-item', tabActive === item.value ? 'active-item' : '']"
					@click="clickTabsItem(item)"
				>
					<view class="item">{{ item.label }}</view>
					<view class="item">{{ item.time }}</view>
					<view v-if="tabActive === item.value" class="bottom-line"></view>
				</view>
			</view>
		</scroll-view>
		<view class="timeSelectList">
			<view class="timeSelect" v-for="item in timeList">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Booking',
		data() {
			return {
				tabList: [],
				tabActive: null,
				timeList: []
			}
		},
		created() {
			this.handelTab()
		},
		methods:{
			clickTabsItem(item) {
				this.tabActive = item.value
			},
			handelTab(){
				//填充tabsList
				const nowDate = new Date().getTime()
				const date = 1000 * 3600 * 24
				const seconds = 60 * 15 * 1000
				const week = {
					0:'周天',
					1:'周一',
					2:'周二',
					3:'周三',
					4:'周四',
					5:'周五',
					6:'周六'
				}
				Array.from({length: 7}, (x, i) => {
					const indexDateGetTime = nowDate + date*i
					const DateGetTime = nowDate + seconds*i
					const indexMonth = new Date(indexDateGetTime).getMonth() + 1
					const indexDate = new Date(indexDateGetTime).getDate()
					const indexWeek = new Date(indexDateGetTime).getDay()
					const indexHours = new Date(DateGetTime).getHours()
					const indexSeconds = new Date(DateGetTime).getSeconds()
					if(indexSeconds < 15){
						indexSeconds == 0
					}else if(30 < indexSeconds < 45){
						indexSeconds == 30
					}
					if(i == 0){
						this.tabActive = indexWeek
						week[indexWeek]= '今天'
					}
					if(i < 7){
						this.tabList.push({
							label: `${indexMonth}月${indexDate}日`,
							value: indexWeek,
							time: week[indexWeek]
						})
					}
					this.timeList.push(`${indexHours}:${indexSeconds}`)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dataList {
		border-radius: 17rpx;
		.tabs-box {
		    position: relative;
		    display: flex;
		    align-items: center;
			background-color: #fff;
		    height: 120rpx;
			.tabs-item {
		      display: flex;
			  flex-direction: column;
		      justify-content: center;
		      align-items: center;
		      margin: 0 28rpx;
		      min-width: 130rpx;
		      font-size: 28rpx;
		      font-family: PingFang SC;
		      font-weight: 500;
		      color: #666666;
			  .item {
				  margin: 10rpx 0;
			  }
		  }
			.active-item {
				font-weight: bold;
			color: #333;
			}
			.bottom-line {
				position: absolute;
				bottom: 0;
				width: 80rpx;
				height: 6rpx;
				background: #C27E15;
				border-radius: 3rpx;
			}
		}
		.dataList_title {
			font-size: 32rpx;
			font-weight: 600;
			letter-spacing: 0rpx;
			line-height: 46.34rpx;
			color: #333333;
			background-color: #fff;
			padding: 24rpx;
			border-radius: 17rpx;
		}
		.timeSelectList {
			margin-top: 8rpx;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			border-radius:0 0 17rpx 17rpx;
			padding: 24rpx;
			.timeSelect {
				width: 104rpx;
				height: 48rpx;
				margin: 10rpx 10rpx;
				border: 1px solid #666666;
				opacity: 1;
				border-radius: 10rpx;
				background: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx 10rpx 10rpx 10rpx;
			}
		}
	}

</style>